<template>
  <el-container>
    <el-header>
      <searchCOM @search="handleSearch"></searchCOM>
    </el-header>
    <tableCOM ref="table" @deleteSelectionA="deleteSelection" @handleSizeChangeA="handleSizeChange" @handleCurrentChangeA="handleCurrentChange"
              @handleSelectionChangeA="handleSelectionChange" @toggleSelectionA="toggleSelection" :tableHeadData="tableHeadData" :tableData="tableData" :operator="operator" :page="page" :pageSize="pageSize" :counts="counts"></tableCOM>
    <editCOM @edit="editConfirm" @dialogEdit="dialogEditClose" :dialogEditVisible="dialogEditVisible" :tableHeadData="tableHeadData"
             :selectList="selectList" :dataUpdate="dataUpdate" :rules="rules"></editCOM>
  </el-container>
</template>

<script>
import DialogOne from "@/components/DialogOne";

import {apiUserAdd, apiUserBan, apiUserDel, apiUserList, apiUserUpdate} from "@/assets/api/UserAPI";
import searchCOM from "@/components/searchCOM";
import editCOM from "@/components/editCOM";
import tableCOM from "@/components/tableCOM";
import {apiCategoryListAll} from "@/assets/api/CategoryAPI";
import {apiOrgListAll} from "@/assets/api/OrgAPI";
export default {
  components: {tableCOM, editCOM, searchCOM, DialogOne},
  data(){
    return{
      tableHeadData: [
        {label: '用户账户', width: '', prop: `userName`,form: true},
        {label: '密码', width: '', prop: `password`,table:true,form:true},
        {label: '昵称', width: '', prop: `realName`},
        {label: '角色(0:管理员,1:普通用户,2:内部用户)', width: '', prop: `role`,type:'radio',radio:[
            {label:'0',name:'管理员'},
            {label:'1',name:'普通用户'},
            {label:'2',name:'内部用户'},
          ],Formate:true,form:true},
        {label: '部门ID', width: '', prop: `categoryId`,table: true,type:"select"},
        {label: '权限等级', width: '', prop: `permissions`},
        {label: '部门', width: '', prop: `categoryName`,form: true},
        {label: '职位', width: '', prop: `ranks`},
        {label: '电话', width: '', prop: `tel`},
        {label: '邮箱', width: '', prop: `email`},
        {label: '组织', width: '', prop: `orgId`,table:true,type:"select"},
        {label: '组织', width: '', prop: `orgName`,form:true},
        {label: '性别(0:男,1:女)', width: '', prop: `sex`,type:'radio',radio:[
            {label:'0',name:'男'},
            {label:'1',name:'女'},
          ],Formate:true},
        {label: '状态(0:禁用,1:正常)', width: '', prop: `status`,type:'radio',radio:[
            {label:'0',name:'禁用'},
            {label:'1',name:'正常'},
          ],Formate:true,form: true},
      ],
    selectList:{},
      dataStandard :{
        userName:'',
        password:'',
        realName:'',
        role:'',
        categoryId:'',
        rank:'',
        tel:'',
        email:'',
        orgId:'',
        sex:'',
        status:'',
      },
      rules:{
        userName: [{required: true, message: '用户账户不可为空', trigger: 'blur'},{pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号'}],
        password: [{required: true, message: '密码不可为空', trigger: 'blur'},{pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号'}],
        realName: [{required: true, message: '昵称不可为空', trigger: 'blur'},{pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号'}],
        role: [{required: true, message: '角色(0:管理员,1:普通用户,2内部用户)不可为空', trigger: 'blur'},{pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号'}],
        categoryId: [{required: true, message: '分类不可为空', trigger: 'blur'},{pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号'}],
        rank: [{required: true, message: '职位不可为空', trigger: 'blur'},{pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号'}],
        tel: [{required: true, message: '电话不可为空', trigger: 'blur'},{pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号'}],
        email: [{required: true, message: '邮箱不可为空', trigger: 'blur'}],
        orgId: [{required: true, message: '组织id不可为空', trigger: 'blur'},{pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号'}],
        sex: [{required: true, message: '性别(0:男,1:女)不可为空', trigger: 'blur'},{pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号'}],
        status: [{required: true, message: '状态(0:禁用,1:正常)不可为空', trigger: 'blur'},{pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号'}],
      },
      operator:[
        {'text':'编辑', click: (row, col, cellValue) => {return this.edit(row)}},
        {'text':'启用', click: (row, col, cellValue) => {return this.ban(row.id)},
          isShow: (row, $index) => {
            if(row.status != '0'){
              return false;
            }
            return true;
          }},
        {'text':'禁用', click: (row, col, cellValue) => {return this.ban(row.id)},
          isShow: (row, $index) => {
            if(row.status != '1'){
              return false;
            }
            return true;
          }},
      ],
      dataUpdate :{},
      pageSize: 10,
      counts:0,
      page:1,
      searchName:'',
      branch:false,
      dialogEditVisible:false,
      multipleSelection:[],
      deleteID:[],
      tableData:[]

    }
  },
  created() {
    this.init()
  },
  methods: {
    parentSubmit(){
      apiUserAdd(this.dataUpdate)
      this.init()

    },
    receive(var1){
      this.dataUpdate = var1;
      this.parentSubmit()
    },
    async init () {
      const params = {
        page: this.page,
        pageSize: this.pageSize,
        name: this.searchName ? this.searchName : undefined

      }
      apiCategoryListAll().then(res =>{
        const list = res.data.data
        for (let i = 0; i<list.length; i ++){
          list[i].typeName = list[i].categoryName
        }
        this.selectList.categoryId = list
      })

      apiOrgListAll().then(res =>{
        const list = res.data.data
        for (let i = 0; i<list.length; i ++){
          list[i].typeName = list[i].orgName
        }
        this.selectList.orgId = list
      })

      apiUserList(params).then(resp => {
        this.tableData = resp.data.data.records,
            this.counts = resp.data.data.total
      })


    },
    ban(rowId){
      const params = {
        id : rowId
      }
      this.$confirm('确认操作, 是否继续?', '确定操作', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
      }).then(() => {
        apiUserBan(params).then(resp =>{
          if (resp.data.code === 1){
            this.$message.success("成功")
          }
          this.init()
        })
        this.branch = false
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.table.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.table.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      let checkArr = []
      val.forEach((n) => {
        checkArr.push(n.id)
      })
      this.multipleSelection = checkArr;
    },
    deleteSelection(){
      this.branch = true
      this.del()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      this.page = val
      this.init()
    },
    del(rowId){
      this.deleteID = this.branch ? this.multipleSelection : rowId
      if (this.deleteID.length === 0 && this.branch) {
        return this.$message.error('请选择删除对象')
      }
      this.$confirm('确认删除, 是否继续?', '确定删除', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
      }).then(() => {
        console.log(this.branch)
        apiUserDel(this.branch ? this.deleteID.join(",") : this.deleteID).then(resp =>{
          if (resp.data.code === 1){
            this.$message.success("成功")
          }
        })
        this.branch = false
        this.init()
      })
    },
    edit(row){
      this.dialogEditVisible = true
      this.dataUpdate = JSON.parse(JSON.stringify(row))
    },
    dialogEditClose(){
      this.dialogEditVisible = false
    },
    editConfirm(data){
      apiUserUpdate(data).then(resp => {
        if(resp.data.code === 1){
          this.$message.success("成功")
        }else {
          this.$message.error(resp.data.msg)
        }
        this.init()
      })
      this.dialogEditVisible = false
    },
    handleSearch(name) {
      this.searchName = name
      this.page = 1;
      this.init();
    },
  },
}
</script>
<style scoped>
</style>